<template>
  <div
    :class="'e-barline-marker-wrap ' + wrapId"
    :key="wrapId"
    :id="wrapId"
    :ref="wrapId"
    :style="{ height: height, width: width }"
  >
    <div :id="id" :ref="id" :class="'chart ' + className" />
    <div ref="menuuu" class="rightMenu" onMouseLeave="this.style.display='none';" style="display:none">
      <ul>
        <li class="item tc" @click.stop="rightItemClickHandle('min')">
          设为起始
        </li>
        <li class="item tc" @click.stop="rightItemClickHandle('max')">
          设为结束
        </li>
        <li class="item tc" @click.stop="rightItemCancelHandle" v-show="showDeleteBtn">
          取消设置
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts'
import { merge, isFunction, isArray, each, has } from 'lodash'
import chartResize from '@/mixins/chartResize'

export default {
  mixins: [chartResize],
  props: {
    className: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      default: 'e-barline-marker'
    },
    options: {
      type: Object,
      default: null
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    chartData: {
      type: Object
    },
    fetchData: {
      type: Function
    },
    markPointData: {
      type: Array
    },
    selectedPoints: {
      type: Array
    },
    collapseIcon: {
      type: Boolean
    }
  },
  data() {
    return {
      chart: null,
      showDeleteBtn: false,
      currentSelectedData: null
    }
  },
  computed: {
    wrapId() {
      return this.id + '-chart'
    }
  },
  created() {
    document.oncontextmenu = function() {
      return false
    }
  },
  mounted() {
    const that = this
    this.chart = echarts.init(document.getElementById(this.id), 'echartstheme')
    this.chart.on('click', function(params) {
      that.$emit('clickSeries', params)
    })
    this.chart.on('contextmenu', function(params) {
      const flag = has(that._events, 'contextmenu')
      if (flag) {
        that.handleRightClick(params)
      }
    })
    this.chart.on('finished', function() {
      that.$emit('finished')
    })
    this.initChart()
    if (isFunction(this.fetchData)) {
      this.getMapData()
    }
  },
  watch: {
    chartData() {
      const menu = this.$refs.menuuu
      menu.style.display = 'none'
      this.chartRest()
      this.$nextTick(() => {
        this.chart.resize()
      })
    },
    markPointData() {
      this.chartRest()
      this.$nextTick(() => {
        this.chart.resize()
      })
    },
    collapseIcon() {
      this.chart.resize()
    },
    selectedPoints() {
      this.chartRest()
      this.$nextTick(() => {
        this.chart.resize()
      })
    }
  },
  beforeDestroy() {
    const { chart } = this
    if (!chart) {
      return
    }
    chart.off('click')
    chart.dispose()
    this.chart = null
  },
  destroyed() {
    const { chart } = this
    if (!chart) {
      return
    }
    chart.off('click')
    chart.dispose()
    this.chart = null
  },
  methods: {
    showLoading() {
      this.chart.showLoading({
        text: '图表生成中,请稍后。。。',
        color: '#2d8cf0',
        textColor: '#2d8cf0',
        maskColor: 'rgba(33, 40, 72,.9)',
        zlevel: 10
      })
    },
    chartRest() {
      this.chart.clear()
      this.chart.hideLoading()
      this.$nextTick(() => {
        this.initChart()
      })
    },
    initChart() {
      const { xAxisData = [], seriesData = [] } = this.chartData
      const retSeries = []
      retSeries.push({
        data: seriesData,
        zlevel: 1,
        markPoint: {
          data: this.markPointData
        }
      })

      if (isArray(this.selectedPoints)) {
        each(this.selectedPoints, item => {
          retSeries.push(item)
        })
      }

      this.chart.setOption(
        merge(
          {
            xAxis: {
              data: xAxisData
            },
            series: retSeries
          },
          this.options
        ),
        true
      )
    },
    /**
     * 获取图表数据
     * @return {[type]} [description]
     */
    getMapData() {
      this.showLoading()
      this.fetchData()
    },
    /**
     * @msg: 右键功能
     * @param {type}
     * @return:
     */
    handleRightClick(params) {
      const { event, data = {}, dataIndex } = params
      this.currentSelectedData = {
        ...data,
        dataIndex
      }
      const { value, index } = data
      for (let i = 0; i < this.markPointData.length; i++) {
        if (this.markPointData[i].value === value && dataIndex === index) {
          this.showDeleteBtn = true
          break
        } else {
          this.showDeleteBtn = false
        }
      }
      const menu = this.$refs.menuuu
      const pageX = event.event.clientX
      const pageY = event.event.clientY
      menu.style.left = pageX - 2 + 'px'
      menu.style.top = pageY - 2 + 'px'
      menu.style.display = 'block'
    },
    rightItemClickHandle(type) {
      this.$emit('contextmenu', this.currentSelectedData, type)
      const menu = this.$refs.menuuu
      menu.style.display = 'none'
    },
    rightItemCancelHandle() {
      this.$emit('contextmenu', this.currentSelectedData, 'cancel')
      const menu = this.$refs.menuuu
      menu.style.display = 'none'
    }
  }
}
</script>
<style lang="less" scoped>
.e-barline-marker-wrap {
  .chart {
    width: 100%;
    height: 100%;
  }
}
.right-menu-wrap {
  position: fixed;
  width: 72px;
  border-bottom: 0 !important;
  z-index: 99;

  .item {
    padding: 4px 0;
    cursor: pointer;
  }
}
</style>
